<template>
  <li>
    <label>
      <input type="checkbox" v-model="iscomplet" />
      <span>{{ item.title }}</span>
    </label>
    <button @click="delet">删除</button>
  </li>
</template>
<script lang="ts">
import { computed, defineComponent } from 'vue'
import { Todo } from '../index'

export default defineComponent({
  name: 'Item',
  props: {
    item: Object as () => Todo,
    deletTodos: {
      type: Function,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    updataTods: {
      type: Function,
      required: true
    }
  },
  setup (props) {
    const delet = () => {
      if (window.confirm('确定要删除吗?')) {
        props.deletTodos(props.index)
      }
    }
    const iscomplet = computed({
      get () {
        return props.item?.iscompleted
      },
      set (val) {
        props.updataTods(props.item, val)
      }
    })
    return {
      delet,
      iscomplet
    }
  }
})
</script>
<style scoped lang="less">
li {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
  padding: 0 10px;
  margin-top: 10px;
  span {
    margin-left: 5px;
  }
  button {
    background: rgb(226, 113, 113);
    border: none;
    color: #fff;
    display: none;
  }
}
li:hover {
  background: pink;
  button {
    display: block;
  }
  span {
    color: aqua;
  }
}
</style>
